<template>
  <button v-if="opentype" class="cell" @click="onClick" :open-type="opentype" @chooseavatar="onChooseavatar">
    <view class="left">
      <text class="color-red" v-if="dot">*</text>
      <text>{{ title }}</text>
    </view>
    <view class="right">
      <slot></slot>
      <image class="icon" v-if="rightArrow" :src="getImageSrc('static/icons/right-arrows.png')"></image>
    </view>
  </button>
  <view class="cell" @click="onClick" v-else>
    <view class="left">
      <text class="color-red" v-if="dot">*</text>
      <text>{{ title }}</text>
    </view>
    <view class="right">
      <slot></slot>
      <image class="icon" v-if="rightArrow" :src="getImageSrc('static/icons/right-arrows.png')"></image>
    </view>
  </view>
</template>

<script setup>
import { getImageSrc } from '@/path/until';
const { title, dot, rightArrow, opentype } = defineProps({
  title: String,
  dot: Boolean,
  opentype: String,
  rightArrow: Boolean
})
const emit = defineEmits(['click', 'chooseavatar'])
function onClick(ev) {
  emit('click', ev)
}
function onChooseavatar(ev) {
  emit('chooseavatar', ev)
}
</script>

<style lang="less" scoped>
.cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26rpx 36rpx;
  background-color: #fff;

  &.cell::after {
    border: none;
  }

  .color-red {
    color: #FF0000;
    margin-right: 12rpx;
  }

  .left {
    font-weight: 400;
    font-size: 32rpx;
    color: #666666;
  }

  .right {
    font-weight: 700;
    font-size: 32rpx;
    text-align: right;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-left: 12rpx;
    }
  }
}
</style>
